<template>
	<div class="dafad">
		<section>
			<div class="userTop">
				<div class="fanhuiBox">
					<img src="../assets/images/fanhui.png" alt="" @click="goBack">
				</div>
				<div class="conBox">
					<div class="kefuBox">
						<img src="../assets/images/picTouxiang-kok-a6a526b1.png" alt="">
						<div class="rightText">
							<p>{{$t('kefuzhongxin.title')}}</p>
							<p>{{$t('kefuzhongxin.titleTow')}}</p>
						</div>
					</div>
					<div class="buttBox" @click="goNextDetali(whatsapp)">
						<img src="../assets/images/kefuad.png" alt="">
						Whats:{{this.$store.state.config.whatsapp}}
					</div>
					<div class="buttBox" @click="goNextDetali(service_link)">
						<img src="../assets/images/kefuad.png" alt="">
						{{$t('kefu.xianshangkefu')}}
					</div>
					<div class="buttBox" @click="fun_wx">
						<img src="../assets/images/kefuad.png" alt="">
						{{$t('kefu.wx')}}
					</div>
					<div class="buttBox" @click="goNextDetali('tel://' + tel)">
						<img src="../assets/images/kefuad.png" alt="">
						{{$t('kefu.tousudianhua')}}
					</div>
				</div>
				<van-popup v-model="wxShow" @close="close_show" style="z-index: 999;">
					<img :src="this.$https.baseUrl + this.$store.state.config.wx_pic" alt="" class="img">
				</van-popup>
			</div>
			<bottom></bottom>
		</section>
		
	</div>
</template>

<script>
	import {Popup} from 'vant'
	import Bottom from "@/components/bottom";
	export default {
		name: "serviceCenter",
		components: {
			Bottom,
			[Popup.name]: Popup,
		},
		data() {
			return {
				wxShow: false,
				service_link: this.$store.state.config.service_link,
				whatsapp: this.$store.state.config.whatsapp_url,
				tel:this.$store.state.config.tel
			}
		},
		mounted() {

		},
		methods: {
			goNextDetali(path) {
				console.log(path);
				 window.location.href = path
				// this.$router.push(path)
			},
			goBack(){
				this.$router.go(-1);
			},
			fun_wx() {
				this.wxShow = true
			},
			close_show() {
				this.wxShow = false;
			}
		}
	}
</script>
<style>
	app {
		min-height: 100%;
	}
</style>
<style scoped lang="less">
	.dafad {
		min-height: 100vh;
		width: 100%;
	}

	* {
		box-sizing: border-box;
	}
 .img{
        width: 7rem;
    }
	.userTop {
		width: 100%;
		height: 144px;
		background-image: url("../assets/images/customer-bg-e99b0b50.png");
		background-size: cover;
		background-repeat: no-repeat;
		background-position: 0px 0px;
		background-size: 100% 100%;
		position: relative;

		.fanhuiBox {
			padding-left: 10px;
			padding-top: 10px;
			text-align: left;

			img {
				width: 20px;
				height: 20px;
			}
		}

		.conBox {
			width: 92%;
			z-index: 2;
			position: absolute;
			top: 55px;
			left: 50%;
			transform: translateX(-50%);
			background: linear-gradient(90deg, #403f40, #403f40);
			padding: 20px 10px 25px;
			box-shadow: 0 10px 10px rgba(0, 0, 0, .05);
			border-radius: 10px;

			.kefuBox {
				display: flex;
				align-items: center;

				img {
					width: 55px;
					height: 55px;
					border-radius: 50%;
					margin-right: 10px;
				}

				.rightText {
					text-align: left;

					p:first-child {
						font-size: 16px;
						color: #fff;
					}

					p:last-child {
						font-size: 12px;
						color: #caced9;
						margin-top: 5px;
					}
				}

			}

			.buttBox {
				width: 100%;
				height: 45px;
				display: flex;
				align-items: center;
				font-size: 15px;
				color: #fff;
				margin-top: 10px;
				border-radius: 5px;
				padding-left: 35%;
				background-image:  linear-gradient(270deg,#dda82d, #f6ce38);

				img {
					width: 24px;
					height: 24px;
					margin-right: 5px;
				}
			}
		}
	}
</style>